<template>
  <div  @click="gotop" v-if="scrollY>200" id="totop">
  		<icon class="totopclass" name="totop"></icon>
  		<div class="totopmain">顶部</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      scrollY:"",
      mygo:false
    }
  },
  methods:{
  	handleScroll () {
    	 this.scrollY=document.body.scrollTop;
  	},
  	gotop(){
  		document.body.className="backtop";
  		var myx=this.scrollY/40;
  		var x=40;
  		var set = function(){
  		if(document.body.scrollTop>myx){
  				setTimeout(function(){
  					myx=this.scrollY/x;
	  				document.body.scrollTop-=myx;
	  				set();
	  				x+=0.3
	  			},5);
  			}
	  	} ;
	  	set()
  	}
  },
  mounted:function(){
  	 window.addEventListener('scroll', this.handleScroll);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#totop{
	width:50px;
	height:50px;
	z-index:5;
	position: fixed;
	right:20px;
	bottom:80px;
	border:1px solid #999999;
	color:#999999;
	border-radius:50%;
	text-align:center;
	box-sizing:border-box;
	padding:2px;
}
.totopclass{
	width:30px;
	height:30px;
}
.totopmain{
	font-size:12px;
	margin-top:-5px;
}
</style>
